
/* 分割线组件 - HarmonyOS设计指南实现 */

@import '../base/color.less';
@import '../base/window.less';

/* 分割线变量 */
:root {
  --divider-width: 1px;
  --divider-spacing: calc(16 * var(--unit));
  --divider-color: var(--color-comp-divider);
  --divider-margin-vertical: calc(16 * var(--unit));
  --divider-margin-horizontal: calc(16 * var(--unit));
}

/* 基础分割线样式 */
.divider {
  display: inline-block;
  grid-column: span 12;
  color: var(--divider-color);
  border: none;
  border-top: var(--divider-width) solid currentColor;
  width: 100%;
  height: var(--divider-width);
  margin: var(--divider-margin-vertical) 0;
  flex-shrink: 0;
}

/* 水平分割线 */
.divider-horizontal,
.divider-row,
.divider.horizontal,
.divider.row {
  display: block;
  width: 100%;
  height: var(--divider-width);
  border: none;
  border-top: var(--divider-width) solid currentColor;
  margin: var(--divider-margin-vertical) 0;
  flex-shrink: 0;
}

/* 垂直分割线 */
.divider-vertical,
.divider-column,
.divider-col,
.divider.vertical,
.divider.column,
.divider.col {
  display: inline-block;
  width: var(--divider-width);
  height: 100%;
  min-height: calc(16 * var(--unit));
  border: none;
  border-left: var(--divider-width) solid currentColor;
  margin: 0 var(--divider-margin-horizontal);
  vertical-align: middle;
  flex-shrink: 0;
}

/* 分割线样式变体 */
.divider-solid,
.divider.solid {
  border-style: solid;
}

.divider-dashed,
.divider.dashed {
  border-style: dashed;
}

.divider-dotted,
.divider.dotted {
  border-style: dotted;
}

/* 分割线粗细变体 */
.divider-thin,
.divider.thin {
  --divider-width: 1px;
  border-width: var(--divider-width);
}

.divider-thick,
.divider.thick {
  --divider-width: 2px;
  border-width: var(--divider-width);
}

/* 分割线颜色变体 */
.divider-primary,
.divider.primary {
  color: var(--color-comp-divider);
}

.divider-secondary,
.divider.secondary {
  color: var(--color-font-tertiary);
}

.divider-tertiary,
.divider.tertiary {
  color: var(--color-font-fourth);
}

.divider-brand,
.divider.brand,
.divider-emphasize,
.divider.emphasize {
  color: var(--color-brand);
}

/* 无间距分割线 */
.divider-no-spacing,
.divider.no-spacing {
  margin: 0;
}

/* 紧凑间距分割线 */
.divider-compact,
.divider.compact {
  --divider-margin-vertical: calc(8 * var(--unit));
  margin: var(--divider-margin-vertical) 0;
}

/* 宽松间距分割线 */
.divider-loose,
.divider.loose {
  --divider-margin-vertical: calc(24 * var(--unit));
  margin: var(--divider-margin-vertical) 0;
}

/* 带文本的分割线 */
.divider-with-text {
  display: flex;
  align-items: center;
  margin: var(--divider-margin-vertical) 0;
  color: var(--color-font-secondary);
  font-size: var(--font-size-caption-medium);
  white-space: nowrap;

  &::before,
  &::after {
    content: '';
    flex: 1;
    height: var(--divider-width);
    border-top: var(--divider-width) solid currentColor;
  }

  &::before {
    margin-right: var(--divider-spacing);
  }

  &::after {
    margin-left: var(--divider-spacing);
  }
}

/* 左侧文本分割线 */
.divider-text-left {
  &::before {
    display: none;
  }
}

/* 右侧文本分割线 */
.divider-text-right {
  &::after {
    display: none;
  }
}

/* Flex布局中的分割线 */
.divider-flex {
  width: var(--divider-width);
  height: auto;
  min-height: 1em;
  margin: 0 var(--divider-margin-horizontal);
  border-top: none;
  border-left: var(--divider-width) solid currentColor;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  :root {
    --divider-color: var(--color-comp-divider);
  }

  .divider-primary,
  .divider.primary {
    color: var(--color-comp-divider);
  }
}
